<script setup>
import {ref, watch} from 'vue'
import {ElMessage} from 'element-plus'
import usePatternStore from "@/store/pattern";
import useNatureSizeStore from "@/store/natureSize.js";
import defaultImg from '@/assets/pic-none.png'
// 将默认图片导入
const imgRef = ref(defaultImg)
console.log(imgRef.value)
const useNatureSize = useNatureSizeStore()
const usePattern = usePatternStore()
const props = defineProps({
  posObj: {
    type: Object,
    default: {}
  },
  rate: {
    type: Number,
    default: 1
  }
})
watch(() => usePattern.modal, (newVal) => {
  if (newVal === "edit") {
    visible.value = true
  } else {
    visible.value = false
  }
})


// 第一、监听放大倍数；第二、监听鼠标的坐标
const rate = ref(0)
const mx = ref(0)
const my = ref(0)
watch(() => props.rate, (newVal) => {
  // newVal小于等于0.5的时候，就不再进行缩小
  rate.value = newVal
//   这个时候，mx和my的值应该是相对于图片的位置
  mx.value = props.posObj.x * rate.value / useNatureSize.getRate()
  my.value = props.posObj.y * rate.value / useNatureSize.getRate()
}, {
  immediate: true
})

// 跳转
const jump = (link) => {
  console.log("jump", link)
  // 正则验证是否为url地址，验证.com .cn .net .org .edu .gov等等
  let reg = new RegExp("[a-zA-z]+://[^s]*");
  if (!reg.test(link)) {
    ElMessage.warning("链接地址格式错误,以http或者https开头")
    return
  } else {
    setTimeout(() => {
      const a = document.createElement('a');
      a.href = link
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }, 100)
  }
}
const omitStr = (str, len) => {
  if (str.length > len) {
    return str.substring(0, len) + "..."
  } else {
    return str
  }
}

const showText = ref(false)
const showTxt = () => {
  showText.value = !showText.value
}
</script>

<template>
  <img @touchend="jump(props.posObj.link)" @touchstart="showTxt" @touchcancel="showTxt" v-if="props.posObj.icon===null||props.posObj.icon===''" :src="imgRef" :style="{ top: my+'px', left:mx+'px' }"
       alt=""
       style="position:absolute;width:32px;height:32px;overflow:hidden;transform: translateX(-50%) translateY(-50%);border-radius: 50%;box-sizing: border-box;">
  <img @touchend="jump(props.posObj.link)" @touchstart="showTxt" @touchcancel="showTxt" v-else :src="props.posObj.icon" :style="{ top: my+'px', left:mx+'px' }" alt=""
       style="position:absolute;width:32px;height:32px;overflow:hidden;transform: translateX(-50%) translateY(-50%);border-radius: 50%;box-sizing: border-box;">

  <div class="pin-container" :style="{ top: my+18+'px', left:mx+'px' }"   v-show="showText">
    <div>
      <span  style="font-size: 12px;color:#512da8;font-weight: 800;line-height: 12px;">{{
          omitStr(props.posObj.txt, 10)
        }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-input-group--prepend .el-input-group__prepend) {
  width: 10px;
}

.pin-container {
  background-color: whitesmoke;
  min-width: 80px;
  transform: translateX(-20px) translateY(10px);
  padding: 6px 8px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 8px;
  position: absolute;
  //定义一个三角形在左上角
  &:before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    top: -20px;
    left: 10px;
    border: 10px solid transparent;
    border-bottom-color: whitesmoke;
  }
}
</style>